<template>
  <!-- 加载信息-->
  <div class="oolong-div" v-show="isShow">
    <div class="oolong-loading">
      <div class="oolong-loading-div">
        <div class="oolong-loading-label">
          <img class="oolong-loading-img" :src="imgurl"/>
          <span class="oolong-loading-font">数据加载中，请耐心等待...</span>
        </div>
      </div>
    </div>
    <div class="oolong-masker"></div>
  </div>
</template>
<script>
import img from '../../assets/img/small.png'

export default {
  data() {
    return {
      imgurl: img
    }
  },
  props: {
    isShow: {
      type: Boolean,
      default: false
    }
  },
  components: {},
  methods: {}
}
</script>
<style>
.oolong-loading {
  position: absolute;
  z-index: 1201;
  /*background: url(//initLoading.gif//此处为加载图片) repeat-x;*/
  border: #ffffff 1px solid;
  /*height:30px;*/
  top: 30%;
  left: 50%;
  margin-top: -16px;
  margin-left: -124px;
  border-radius: 4px
}

.oolong-loading-div {
  font-size: 14px;
  margin: 2px;
  color: #1F1F1F;
  height: 50px;
  /*padding-left: 12px;*/
  border: #ffffff 1px solid;
  background: #ffffff /*url(//initLoading.gif//此处为加载图片) no-repeat 2px 4px*/;
  line-height: 50px;
  opacity: 0.9;
  border-radius: 4px
}

.oolong-loading-img {
  height: 40px;
  width: 40px;
  position: absolute;
  left: 16px;
  border: none;
  margin-top: 5px
}

.oolong-loading-font {
  color: #FF9900;
  font-weight: 800;
  margin-left: 50px;
}

.oolong-loading-label {
  /*margin: 4px 7px 1px 8px;*/
  text-align: center;
  width: 240px;
  font-size: 14px;
}

.oolong-masker {
  position: absolute;
  z-index: 1200;
  background-color: #ccc;
  filter: progid:DXImageTransform.Microsoft.alpha(opacity=50);
  opacity: .3;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  /*margin-left: -20px;*/
}

.oolong-div {
  width: 100%;
  height: 100%;
}
</style>
